<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
		<style>
			/* 定位盒子的经典应用:大相小绝 */
			*{
				margin:0 ;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				background-color: aqua;
				/* 相对定位     会脱标*/
				position: relative;
				left: 100px;
				/* top: 100px; */
			}
			.abox{
				width: 300px;
				height: 300px;
				background-color: aquamarine;
				/* 绝对定位      不会脱标*/
				position: absolute;
				/* top: 400px; */
				/* right: 300px; */
				/* 绝对定位的元素移动时的参照点是祖先元素的位置
				如果没有祖先元素或祖先元素没有定位,则以浏览器为准定位
				如果祖先元素有定位(相对,绝对,固定),则以最近一级有定位元素作为参照点. */
			}
			.bigbox{
				width: 600px;
				height: 600px;
				border: 1px solid red;
			}
			.fubox{
				position: relative;
				width: 400px;
				height: 400px;
				border: 1px solid black;
			}
			.erbox{
				position: absolute;
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			.fixed{
				width: 50px;
				height: 100px;
				border: 1px solid red;
				position: fixed;
				right: 0;
				top: 300px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="abox"></div>
		<div class="bigbox">
			<div class="fubox">
				<div class="erbox"></div>
			</div>
		</div>
		<div class="fixed">
			售后服务
		</div>
	</body>
</html>